<template>
    <el-tabs type="card" v-model="activeName" class="demo-tabs" @tab-change="tabChange">
        <el-tab-pane v-for="item in warehouseData" :name="item.id" :label="item.name">

            <el-divider content-position="left"> {{ item.brief }}</el-divider>


        </el-tab-pane>
    </el-tabs>




    <el-form :inline="true" :model="formData">
        <el-form-item label="编号">
            <el-input v-model="formData.name" placeholder="请输入栈板编号" clearable />
        </el-form-item>
        <el-form-item label="状态">

            <Statusx v-model="formData.status" enumClassName="ShelfStatus"></Statusx>

        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="onSubmit">新增</el-button>
        </el-form-item>
    </el-form>
    <el-table :data="tableData" style="width: 100%">
        <el-table-column fixed prop="id" label="编号" width="80" />
        <el-table-column prop="name" label="名称" width="100" />

        <el-table-column prop="statusX" label="状态" width="80">
            <template #default="scope">
                <el-tag class="ml-2" v-if="scope.row.status == 1" type="success">{{ scope.row.statusX }}</el-tag>
                <el-tag class="ml-2" v-if="scope.row.status == 2" type="danger">{{ scope.row.statusX }}</el-tag>
            </template>
        </el-table-column>


        <el-table-column prop="brief" label="说明" width="180" />
        <el-table-column fixed="right" label="操作" min-width="160">
            <template #default="scope">
                <el-button type="primary" size="small" @click="editClick(scope.row)">编辑</el-button>
                <el-button type="danger" size="small" @click="deleteClick(scope.row)">
                    弃用
                </el-button>
            </template>
        </el-table-column>
    </el-table>
</template>

<script setup lang="ts">
import Statusx from '@/components/Statusx.vue'
import { dayjs, ElMessageBox, ElMessage } from 'element-plus'
const warehouseData = ref([])
const formData = reactive({ name: '', status: 1 })
const tableData = ref<any>([])
const activeName = ref('')


onMounted(() => {
    callWarehouseApi()


})
const tabChange = (value) => {
    tableData.value = []
    callShelApi()

}
const callWarehouseApi = () => {
    warehouseApi.select().then((res: any) => {
        warehouseData.value = res
        activeName.value = res[0].id
        callShelApi()
    })
}
const callShelApi = () => {
    shelfApi.select({ warehouseId: activeName.value }).then((res: any) => {
        tableData.value = res
    })
}

const onSubmit = () => {

    shelfApi.insert({ name: formData.name, warehouseId: activeName.value, status: formData.status }).then((res: any) => {
        ElMessage.success('新增成功')
        callShelApi()
    })

}


</script>